import {} from "https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js";
import {} from './jquery.lazyload.js';
import {} from "./jquery.pagination.js";

const $shoplist_ul=$('.shoplist ul');
let $page = null;

//排序的操作-设置初始变量
let $array = []; //排序后的数组
let $array_default = []; //排序前的数组
let $prev = 0; //上一个价格
let $next = 0; //下一个价格
//----------

$.ajax({
    url:'http://10.31.165.32/com.111.www/php/list.php',
    dataType: 'json'
}).done(function(data){
    $page = data.pagesize;
    let $arrdata = data.pagecontent;
    let $strhtml ='';
    $.each($arrdata,function(index,value){
        $strhtml+=`<li>
        <a href="detail.html?sid=${value.sid}">
        <img class="lazy" data-original="${value.picurl}" alt="" width="200" height="200">
        </a>
        <p class="price">￥${value.price}</p>
        <p class="title"><a href="">${value.title}</a></p>
        <div><span>1药网自营</span><span>评论0条</span></div>
    </li>`
    });
    $shoplist_ul.html($strhtml);
    
    $('img.lazy').lazyload({
        effect: "fadeIn" //切换形式
    });
    const $shoplist_ul_li=$('.shoplist ul li');
                $shoplist_ul_li.each(function(index, element){
                    $array[index] = $(this);
                    $array_default[index] = $(this);
                });

    $('.page').pagination({
        pageCount: $page, //总的页数
        jump: true, //是否开启跳转到指定的页数，布尔值。
        prevContent: '上一页', //将图标改成上一页下一页。
        nextContent: '下一页',
        callback: function(api) {
            //console.log(api.getCurrent()); //获取当前的点击的页码。
            $.ajax({
                url: 'http://10.31.165.32/com.111.www/php/list.php',
                data: {
                    page: api.getCurrent() //将页码传递给后端。
                },
                dataType: 'json'
            }).done(function(data){
                let $arrdata = data.pagecontent;
                let $strhtml ='';
                $.each($arrdata,function(index,value){
                    $strhtml+=`<li>
                    <a href="detail.html?sid=${value.sid}">
                    <img class="lazy" data-original="${value.picurl}" alt="" width="200" height="200">
                    </a>
                    <p class="price">￥${value.price}</p>
                    <p class="title"><a href="">${value.title}</a></p>
                    <div><span>1药网自营</span><span>评论0条</span></div>
                </li>`
                });
                $shoplist_ul.html($strhtml);
                $('img.lazy').lazyload({
                    effect: "fadeIn" //切换形式
                });

            });       
        }
    });
});

$('.b_button').on('click', function() {
    $.each($array_default, function(index, value) {
        $shoplist_ul.append(value); 
    });
    return;
});
$('.p_button').on('click', function() {
    for (let i = 0; i < $array.length - 1; i++) {
        for (let j = 0; j < $array.length - i - 1; j++) {
            $prev = parseFloat($array[j].find('.price').html().substring(1)); 
            $next = parseFloat($array[j + 1].find('.price').html().substring(1)); 
            if ($prev > $next) { 
                let temp = $array[j];
                $array[j] = $array[j + 1];
                $array[j + 1] = temp;
            }
        }
    }

    $.each($array, function(index, value) { 
        $shoplist_ul.append(value); 
    });
});







